<template>
  <div class="app-container">
    <h1>vue3</h1>
    <!-- <p :class="color">静哥真帅</p>
    <p :class="{ yellow: isYellow, green: !isYellow }">静哥真帅</p> -->
    <p class="title">静哥真帅</p>
    <button @click="switchColor">切换</button>
    <Child />
  </div>
</template>

<script lang="ts">
import Child from "./Child.vue";
/*
  1. 静态样式
    class="title"
    style="font-size: 20px"

  2. 动态样式
    - 动态class
      - :class="xxx"
      - :class="{ xxx: true, yyy: false }"
      - :class="[ xxx, yyy ]"
    - 动态style
      :style="{ fontSize: xxx }"
    - v-bind
      给样式绑定一个动态的值

  3. scoped
    作用：让样式只对当前组件生效(注意：子组件根标签会受到影响)
    问题：
      想要修改子组件样式，怎么办？
      - 全局样式(影响范围太大)
      - 深度样式选择器
        :deep(xxx) {}
*/
export default {
  name: "App",
  components: {
    Child,
  },
  data() {
    return {
      color: "yellow",
      isYellow: true,
    };
  },
  methods: {
    switchColor() {
      this.color = this.color === "yellow" ? "green" : "yellow";
      this.isYellow = !this.isYellow;
    },
  },
};
</script>

<style scoped>
.yellow {
  color: yellow;
}
.green {
  color: green;
}
.title {
  color: v-bind(color);
}

:deep(.text) {
  color: pink;
}
</style>
